<template>
  <div class='homeContent'>

	<a-row :gutter="16">
		<a-col class="gutter-row" :span="6">
			<div class="number-card" >
				<a-icon type="barcode" />
				<a-statistic title="今日需求提交数" :value="todayNeed"/>
			</div>
		</a-col>
		<a-col class="gutter-row" :span="6">
			<div class="number-card color-success" >
				<a-icon type="radar-chart" />
				<a-statistic title="今日下发任务数" :value="arrangeTask"/>
			</div>
		</a-col>
		<a-col class="gutter-row" :span="6">
			<div class="number-card color-primary">
				<a-icon type="database" />
				<a-statistic title="今日完成任务数" :value="approvalTask"/>
			</div>
		</a-col>
		<a-col class="gutter-row" :span="6">
			<div class="number-card color-warning">
				<a-icon type="profile" />
				<a-statistic title="今日截止任务数" :value="deadlineTask"/>
			</div>
		</a-col>
	</a-row>
    <a-row :gutter="16"  style="margin-top:20px">
		<a-col class="gutter-row" :span="12">
		     <a-card>
		     <a-row :gutter="16">
		     <a-col class="gutter-row" :span="12">
		        <djsl-chart></djsl-chart>
		        </a-col>
		         <a-col class="gutter-row" :span="12">
		       <djfb-chart></djfb-chart>
		        </a-col>
		        </a-row>
		    </a-card>
		</a-col>
		<a-col class="gutter-row" :span="12">
			<a-card>
 				<xqtj-chart></xqtj-chart>
 			</a-card>
		</a-col>
	</a-row>
	<a-row :gutter="16" style="margin-top:20px">
		<a-col class="gutter-row" :span="12">
			<a-card title="待审批需求" class="card-table"  style="min-height:408px">
 				<a-table
				    :columns="columns1" :row-key="record => record.id" :data-source="data1":pagination="pagination1" :loading="loading1" @change="handleTableChange1">
				</a-table>
		    </a-card>
		</a-col>
		<a-col class="gutter-row" :span="12">
			<a-card title="待审批任务" class="card-table" style="min-height:408px">
 				<a-table
				    :columns="columns2" :row-key="record => record.id" :data-source="data2":pagination="pagination2" :loading="loading2" @change="handleTableChange2">
				</a-table>
		    </a-card>
		</a-col>
	</a-row>
  </div>
</template>

<script>
import axios from "axios"
import moment from 'moment'
import DJSLchart from './components/DJSLchart'
import DJFBchart from './components/DJFBchart'
import XQTJchart from './components/XQTJchart'
import {GETTODAYPRODUCTDNEED,STATISTICSTASK} from '@/../static/js/apis.js'
import global from "@/../static/global.vue"
const columns1 = [
  {
    title: '名称',
    dataIndex: 'demandName',
    ellipsis: true
  },
  {
    title: '提交时间',
    dataIndex: 'creattime',
  },
  {
    title: '截止日期',
    dataIndex: 'endtime',
  },
   {
    title: '描述',
    dataIndex: 'demandDes',
  },
];

const columns2 = [
  {
    title: '名称',
    dataIndex: 'name',
    ellipsis: true
  },
  {
    title: '提交时间',
    dataIndex: 'creattime',
  },
  {
    title: '截止日期',
    dataIndex: 'endtime',
  },
   {
    title: '描述',
    dataIndex: 'demandDes',
  },
];
export default {
  name: 'shortcutMenu',
  components:{
  	djslChart: DJSLchart,
  	djfbChart: DJFBchart,
  	xqtjChart: XQTJchart
  },
  data () {
  	return {
      data1: [],
      pagination1: {},
      loading1: false,
      data2: [],
      pagination2: {},
      loading2: false,
      columns1,
      columns2,
      todayNeed:'',
      arrangeTask:'',
      approvalTask:'',
      deadlineTask:''
  	}
  },
  methods: {
  	 /*获取静态数据*/
      getStaticData() {
        let self = this
        GETTODAYPRODUCTDNEED('', function (res) {
        	self.todayNeed=res.obj
        })
        STATISTICSTASK({message:'下发任务'}, function (res) {
        	self.arrangeTask=res.obj
        })
        STATISTICSTASK({message:'审批任务'}, function (res) {
        	self.approvalTask=res.obj
        })
         STATISTICSTASK({message:'截止任务'}, function (res) {
        	self.deadlineTask=res.obj
        })
      },
  gotoJRXQ(){
     this.$router.push({path: '/needsManagement', query: {system: '业务管理',type:'JRXQ'}})
     this.$store.commit('changeFirstNavSelected', '1')
  },
   gotoJRXF(){
     this.$router.push({path: '/needsManagement', query: {system: '业务管理',type:'JRXF'}})
     this.$store.commit('changeFirstNavSelected', '1')
  },
  	handleTableChange1(pagination, filters, sorter) {
     let self=this
      const pager = { ...self.pagination1 };
      pager.current = pagination.current;
      self.pagination1 = pager;
      self.fetch1({
        message:"未审批需求",
        results: pagination.pageSize,
        page: pagination.current,
         sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters,
      });
    },
    fetch1(params = {message:'未审批需求'}) {
      let self=this
      self.loading1 = true;
      axios.post(global.bussinessManUrl + '/rest/datamanage/demandtask/unaprrove', {
	      results: 4,
          ...params,
	  })
	  .then(function (response) {
	   const pagination = { ...self.pagination1 };
        pagination.pageSize=4;
        pagination.total = response.data.totals;
        self.loading1 = false;
        self.data1 = response.data.list_new;
        self.pagination1 = pagination;
	  })
    },
    handleTableChange2(pagination, filters, sorter) {
     let self=this
      const pager = { ...self.pagination2 };
      pager.current = pagination.current;
      self.pagination2 = pager;
      self.fetch2({
        message:"未审批任务",
        results: pagination.pageSize,
        page: pagination.current,
         sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters,
      });
    },
    fetch2(params = {message:'未审批任务'}) {
      let self=this
      self.loading2 = true;
       axios.post(global.bussinessManUrl +'/rest/datamanage/demandtask/unaprrove', {
	      results: 4,
          ...params,
	  })
	  .then(function (response) {
	   const pagination = { ...self.pagination2 };
        pagination.pageSize=4;
        pagination.total = response.data.totals;
        self.loading2 = false;
        self.data2 = response.data.list_new;
        self.pagination2 = pagination;
	  })
    },
  },
  created () {
   this.getStaticData()
  },
  mounted () {
  	 this.fetch1();
  	 this.fetch2();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*快捷菜单*/
.homeContent{
	width: 94%;
	margin: 20px 3%;
}
.number-card{
  cursor:pointer;
	height:200px;
	color:white;
	border-radius:3px;
	line-height:260px;
	background:linear-gradient(60deg,#26c6da,#00acc1);
}
.color-success{
	background: linear-gradient(60deg,#66bb6a,#43a047);
}
.color-primary{
	background: linear-gradient(60deg,#ab47bc,#8e24aa);
}
.color-warning{
	background: linear-gradient(60deg,#ffa726,#fb8c00);
}
.number-card i{
	font-size:72px;
	margin-left:2rem
}
/deep/.ant-statistic{
	margin-left:50px;
	display:inline-block;
}
/deep/.ant-statistic .ant-statistic-title{
	color:white;
	font-size:22px
}
/deep/.ant-statistic .ant-statistic-content-value-int{
	color:white;
	font-size:42px;
}
/deep/ table .ant-table-tbody > tr > td{
	padding: 12px 12px!important
}
</style>
